基本的なグリッドの作成

Spread.Viewsを使用すると、JSONファイルからデータを取得して、グリッド列を自動的に生成できます。基本的なグリッドレイアウトを作成するには、次の手順を実行します。

基本的なグリッドの追加

ページのJavaScriptを追加します。一般的なコードは次のとおりです。
```
 <!DOCTYPE html>
  <html>
  <head>
      <title>Spread.Views test page</title>
```
参照スクリプトを追加します。gc.spread.common.jsおよびgc.spread.views.dataview.js参照はSpread.Viewsのコア機能を、gc.spread.views.gridlayout.jsは使用するグリッドレイアウトをそれぞれ提供します。

      <script src="[Your Script Path]/gc.spread.common.10.0.0.min.js" type="text/JavaScript"></script>
      <script src="[Your Script Path]/gc.spread.views.dataview.10.0.0.min.js" type="text/JavaScript"></script>
      <script src="[Your Script Path]/gc.spread.views.gridlayout.10.0.0.min.js" type="text/JavaScript"></script>
      <style>
              * {
                  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
              }
          </style>

外観をカスタマイズするためのCSSファイルを追加します。デフォルトの外観を使用するには、gc.spread.views.dataview.10.0.0.cssファイルを使用します。
```
   <link rel="stylesheet" href="[Your Stylesheet Path]/gc.spread.views.dataview.10.0.0.css" type="text/css">
```

製品ライセンスを追加します。

 <script src="[Your Script Path]/license.js" type="text/javascript"></script>

列の定義を追加します。

  var countries = ['US,Germany,UK,Japan,Italy,Greece'];
              var data=[];
               for(var i = 0; i<100; i++){
                   data.push({
                       id:i,
                       country:countries[i%countries.length],
                       date: new Date(2015, i % 12, i % 28),
                       amount:Math.floor(Math.random()*10000),
                       active:i%4===0
                   });
               }

DOM（ドキュメントオブジェクトモデル）要素内に、IDをgrid1として、Spread.Viewsコントロールの初期化コードを追加します。
```
 var dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, new GC.Spread.Views.Plugins.GridLayout());
```

Spread.ViewsコントロールのターゲットDOM要素を作成します。

 <body style="margin:0;position:absolute;top:0;bottom:0;left:0;right:0;font-size:14px;">
   <div id="grid1" style="height:100%"></div>

注意: licensekey.jsファイルには、次のライセンス文字列が記述されている必要があります。引用符内のテキストは、実際のライセンスキー文字列に置き換えてください。

GC.Spread.Views.LicenseKey = "your license key";